<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

//
var Car = function (b,c){
	var a="car";
	return {
		init:function(){
			alert(a);
			alert(b);
			alert(c);
		}
	};
}(1,2);

function fnClick(){
	var a=3;
	var b=a+"";
	var c=a.toString();
	
	alert(typeof(a)+" "+typeof(c)+" "+typeof(c));
}

function fnTestString(){
	//
	var score = "test 'dddd'";
	alert(score);
	score = "test \'dddd\"";
	alert(score);
	alert(escape("$#@#我要的"));
}

function fnArray(){
	var aMap = new Array("0","1","2");//vMap=["0","1","2"];
	aMap[20]="20";
	alert(aMap.length+" "+aMap[10]+" "+aMap[20]);
	alert(aMap.toString());
	//push pop实现的栈
	var stack = new Array();
	stack.push("1");
	stack.push("2");
	stack.push("3");
	alert(stack.toString());
	
	var s=stack.pop();
	alert(s);
	alert(stack.toString());
}

function fnForIn(){
	var aMap=new Array("1","2","3");
	
	for(var i in aMap){
		alert(aMap[i]);//for in遍历数组
	}
	var obj=new Object();
	obj.a ="a1";
	obj.b ="b1";
	obj.c ="c1";
	alert(obj);
	for(var o in obj){
		alert(obj[o]);//for in 遍历对象
	}
}

function fnObject(){
	Car.init();
}

//------------------window--------------------------
var oWin;
function fnOpenWindow(){
	oWin =window.open("window.html","_blank","height:200px;width:200px;");//第三个参数可以省略
}

function fnCloseWindow(){
	oWin.close();
}

function fnResizeWindow(){
	oWin.resizeTo(100,100);
}

function fnConfirm(){
	if(confirm("确认不?")){
		alert("OK");
	}else{
		alert("KO");
	}
}

function fnPrompt(){
	var sInput = prompt("输入您的名字","默认");
	alert(sInput);
}
function fnHistory(){
	window.history.go(-1);//正数向前,负数向后
}
//----------------------------------------------------
function fnDocument(){
	var myList=document.images;
	for(var i=0;i<myList.length;i++){
		alert(myList[i].src);
	}
}
//----------------------------------------------------

function fnLocation(){
	alert(location.href);
	location.replace="test.jpg";
	//location.href="test.jpg";//跳转到该页面
}

function fnReload(){
	alert("reload");
	location.reload(false);
}
//--------------------------------------------
function fnGetElement(){
	var obj	= document.getElementById("abcd");
	alert(obj.value);
}
//--------------------innerHTML-------------------
function fnInnelHTML(){
	var myDiv = document.getElementById("innerTest");
	myDiv.innerHTML="<img src='test.jpg'/>";
}
//-------------------------className-----------------
function fnClassName(){
	var obj=document.getElementById("divTest");
	//obj.className="myStyle1";//修改CSS类		
	obj.className+="myStyle2";//追回CSS类
}
//----------------------------event-------------------
window.onload=function(){
	//在eventTest绑定onclick事件
	var obj=document.getElementById("eventTest");
	//设置监听事件(标准DOM中使用参数传递event)
	obj.onclick=function (oEvent){
		alert("Test");
		//IE下使用window.event来获取事件对象
		if(window.event){
			oEvent=window.event;
		}
		alert(oEvent.type);
	}
	
	var obj1=document.getElementById("eventListener");
	//DOM标准的监听方法
	obj1.addEventListener("click",fnEventListenert,false);
	//obj1.removeEventListener("click",fnEventListenert,false);
	
	
	var obj2=document.getElementById("abcd");
	obj2.onkeyup=handle;
	
}
//事件处理函数
function handle(oEvent){
	alert(oEvent.type);
}

function fnEventListenert(){
	alert("TEST");
}

//----------------table-------------------------------
function fnInsertTable(){
	//table对象
	var oTable = document.getElementById("tableTest");
	//插入tr对象  (插件行号为1的行,从0开始)
	var oTr = oTable.insertRow(1);
	//插入td对象
	var oTd =oTr.insertCell(0);
	//插入数据
	oTd.appendChild(document.createTextNode("3"));
	oTd = oTr.insertCell(1);
	oTd.appendChild(document.createTextNode("4"));
}

function fnModifyTable(){
	//table对象
	var oTable = document.getElementById("tableTest");
	oTable.rows[0].cells[0].innerHTML="5";
}

function fnDeleteTable(){
	//table对象
	var oTable = document.getElementById("tableTest");
	oTable.deleteRow(1);
}

//-----------------from---------------------
function fnForm(){
	var oForm = document.getElementById("formTest");
	oForm.name1.value="ddddd";
	//oForm.submit();
}

//------------------------------------
function fnAjax(){
	var xmlHttp;
	//创建XMLHttpRequest对象
	if(window.ActiveXObject){
		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	}else if(window.XMLHttpRequest){
		xmlHttp=new XMLHttpRequest();
	}else{
		alert("test null");
	}
	//创建请求
	xmlHttp.open("POST","http://localhost/",true);
	//POST请求必须.GET不需要
	xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	//监听readystatechange事件
	xmlHttp.onreadystatechange=function(){
		alert(xmlHttp.readyState+" "+xmlHttp.status);
		if(xmlHttp.readyState==4){
			alert("服务器返回:"+xmlHttp.responseText);
		}
	}
	//不发送数据时为空
	xmlHttp.send("a=1&b=2");
	alert(xmlHttp);
}

</script>

<style type="text/css">
	input[type="button"]{position:relative;width:50px;}
	.myStyle{background-color:red;}
	.myStyle1{background-color:blue;}
	.myStyle2{width:200px;height:200px;}
</style>
</head>
<body>
	<div>
		<input type="button" value="点我" onclick="fnClick();"/>
	</div>
	<div>
		<input type="button" value="String" onclick="fnTestString();"/>
	</div>
	<div>
		<input type="button" value="Array" onclick="fnArray();"/>
	</div>
	<div>
		<input type="button" value="ForIn" onclick="fnForIn();"/>
	</div>
	<div>
		<input type="button" value="Object" onclick="fnObject();"/>
	</div>
	<div>
		<input type="button" value="OpenWindow" onclick="fnOpenWindow();"/>
		<input type="button" value="CloseWindow" onclick="fnCloseWindow();"/>
		<input type="button" value="ResizeWindow" onclick="fnResizeWindow();"/>
		<input type="button" value="Confirm" onclick="fnConfirm();"/>
		<input type="button" value="Prompt" onclick="fnPrompt();"/>
		<input type="button" value="History" onclick="fnHistory();"/>
	</div>
	
	<div>
		<input type="button" value="Document" onclick="fnDocument();"/>
	</div>
	<div>
		<input type="button" value="Location" onclick="fnLocation();"/>
		<input type="button" value="ReloadLocation" onclick="fnReload();"/>
	</div>
	<div >
		<input type="button" value="GetElement" onclick="fnGetElement();"/>
	</div>
	<div id="innerTest">
		<input type="button" value="InnelHTML" onclick="fnInnelHTML();"/>
	</div>
	<div id="divTest" style="background-color:yellow;">
		<input type="button" value="ClassName" onclick="fnClassName();"/>
	</div>
	<div>
		<input type="button" value="Event" id="eventTest"/>
		<input type="button" value="EventListener" id="eventListener"/>
	</div>
	<div >
		<input type="button" value="InsertTable" onclick="fnInsertTable()"/>
		<input type="button" value="ModifyTable" onclick="fnModifyTable()"/>
		<input type="button" value="DeleteTable" onclick="fnDeleteTable()"/>
	</div>
	<div >
		<input type="button" value="Ajax" onclick="fnAjax()"/>
	</div>
	<img src="test.jpg"/>
	<input type="text" value="abcd" id="abcd"/>
	<table border="1" id="tableTest">
		<tr>
			<td>1</td>
			<td>2</td>
		</tr>
	</table>
	<form id="formTest">
		<input type="text" name="name1" value="test"/>
		<input type="button" value="Form" onclick="fnForm()"/>
	</form>
</body>
</html>